<template>
	<view>
		<block v-if="detail">
			<view class="box">
				<view class="tit_label">合同文档</view>
				<view class="contract between align-c">
					<view class="">健身合同文档.docx</view>
					<button class="open_btn" @click="open">打开</button>
				</view>
			</view>
			
			<view class="box">
				<view class="tit_label">合同照片</view>
				<view class="grid">
					<view class="img_box" v-for="(v,i) in imgList" :key="i" >
						<image :src="$img(v)" @click="previewImage(i)" mode="aspectFill" class="contract_img" />
						<image v-if="type != 1" src="/static/home/del-img.png" mode="aspectFill" class="del_img" @click="delItem(i)" />
					</view>
					<image v-if="type != 1" src="/static/home/upload_img.png" @click="$upload('imgList')" mode="aspectFill" class="contract_img" />
				</view>
			</view>
			
			<view class="button_box" v-if="type != 1">
				<button class="save_btn" @click="uploadContract">保存</button>
			</view>
			<view class="place"></view>
		</block>
		
		<u-popup :show="show" mode="center" @close="close" @open="open">
			<view class="pop-box">
				<view class="info">文件需下载才能打开，是否确认去继续？</view>
				<view class="flex">
					<view class="close f1" @click="close">取消</view>
					<view class="f1" @click="downloadFile(baseUrl + detail.file)">下载</view>
				</view>
			</view>
		</u-popup>
		
		<view class="progress-container" v-if="isShowProgress">
			<view class="progress-box">
				<view class="text">文件下载中，请稍后......</view>
				<progress :percent="progress" show-info stroke-width="3" />
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/libs/config.js'
	export default {
		data() {
			return {
				show: false,
				isShowProgress: false,
				progress: 0,
				detail: null,
				imgList: [],
				shop_id: '',
				id: '',
				type: '',
				baseUrl: config.baseUrl,
			}
		},
		onLoad(e) {
			this.shop_id = uni.getStorageSync('shopId');
			this.id = e.id;
			this.type = e.type;
			this.getContract();
		},
		methods: {
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			async getContract() {
				let res = await this.$api.get(`staff/view/${this.id}`);
				if(res.code == 200) {
					this.detail = res.data;
					this.file = res.data.file;
					this.imgList = res.data.images;
				}
			},
			downloadFile(url) {
				
				// #ifdef APP
				var fileUrl = uni.getStorageSync('fileUrl');
				
				const downloadTask = uni.downloadFile({
					url,
					success: res => {
						if (res.statusCode === 200) {
							this.isShowProgress = false;
							console.log('下载成功');
						}
						let that = this;
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: (red) => {
								that.isShowProgress = false;
								uni.setStorageSync('fileUrl',red.savedFilePath)
								uni.showModal({
									title: '提示',
									content: '文件已保存：' + red.savedFilePath,
									cancelText: '我知道了',
									confirmText: '打开文件',
									success: (res) => {
										if (res.confirm) {
											uni.openDocument({
												filePath: red.savedFilePath,
												success: (sus) => {
													console.log('成功打开');
												}
											})
										}
									}
								});
							}
						});
					}
				})
				
				downloadTask.onProgressUpdate((res) => {
					if(res.progress > 0) {
						this.isShowProgress = true;
					}
					this.progress = res.progress;
					console.log('下载进度：' + res.progress);
					// console.log('已下载长度：' + res.totalBytesWritten);
					// console.log('文件总长度：' + res.totalBytesExpectedToWrite);
				})
				// #endif
			},
			previewImage(i) {
				let urls = [];
				this.imgList.forEach(v => {
					urls.push(this.$img(v))
				})
				uni.previewImage({
					current: i,
					urls
				})
			},
			async uploadContract() {
				let res = await this.$api.post(`staff/upcontract/${this.detail.id}`,{
					images: this.imgList.join(',')
				});
				if(res.code == 200) {
					uni.showToast({
						title: res.msg,
					});
					setTimeout(v => {
						uni.navigateBack();
					},2500);
				}
			},
			delItem(i) {
				this.imgList.splice(i,1);
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFF;
	}
</style>

<style lang="scss" scoped>
	.box {
		margin: 0 47rpx;
	}
	.tit_label {
		font-size: 29rpx;
		height: 78rpx;
		line-height: 78rpx;
		font-weight: bold;
	}
	.contract {
		background-color: #FFF6EF;
		padding: 28rpx;
		font-size: 27rpx;
		.open_btn {
			margin: 0;
			padding: 0;
			height: 40rpx;
			line-height: 40rpx;
			width: 93rpx;
			text-align: center;
			font-size: 24rpx;
			border-radius: 20rpx;
			background-color: #F17816;
			color: #FFF;
		}
	}
	
	.grid {
		display: grid;
		grid-template-columns: 150rpx 150rpx 150rpx 150rpx;
		.img_box {
			position: relative;
			.del_img {
				position: absolute;
				right: 25rpx;
				top: 5rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
		.contract_img {
			width: 133rpx;
			height: 133rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
		}
	}
	
	.button_box {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		.save_btn {
			margin: 25rpx 27rpx;
			background-color: #F17816;
			color: #FFF;
			font-size: 32rpx;
			height: 90rpx;
			line-height: 90rpx;
		}
	}
	
	.progress-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: rgba(0, 0, 0, .5);
		width: 750rpx;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		.progress-box {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			.text {
				margin-bottom: 20rpx;
			}
		}
	}
</style>